<template>
  <div>
    <div v-if="page == 0">
      <div class="flexDiv">
        <div class="card-title">
          参数详情----{{ facId == 1 ? "CEFR堆" : "CARR堆" }}
        </div>
        <div>
          <el-button
            type="text"
            icon="el-icon-close"
            @click="goback"
            style="color: black"
          ></el-button>
        </div>
      </div>
      <el-form :inline="true" :model="formInline1">
        <el-form-item label="参数名称：">
          <el-input
            v-model="formInline1.name"
            placeholder="请输入"
            style="height: 32px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="search1"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="reset1"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <div class="title">
        <div class="title-name">列表详情:</div>
        <!-- <div class="title-refresh" @click="getPerimeterData1">
          <i class="el-icon-refresh" style="margin-right: 8px"></i>刷新
        </div> -->
      </div>
      <el-table
        :data="tableData1"
        style="width: 98%"
        class="tableBox"
        stripe
        :max-height="conheight"
      >
        <el-table-column label="序号" prop="index" width="120" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="paramterName" label="参数名">
          <!-- <template slot-scope="scope">
              <span>{{ parseTime(scope.row.deviceTime) }}</span>
            </template> -->
        </el-table-column>
        <el-table-column
          prop="paramNumber"
          label="当前值"
          align="right"
          width="200"
        >
          <template slot-scope="scope">
            <span
              :class="
                scope.row.paramNumber < scope.row.min
                  ? 'max'
                  : scope.row.paramNumber > scope.row.max
                  ? 'max'
                  : ''
              "
              >{{ formatParamValue(scope.row) }}</span
            ><span style="margin: 0px 6px">{{ scope.row.unit }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="max" label="最大值" align="right" width="130">
          <template slot-scope="scope">
            {{ scope.row.max + " " + scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column prop="min" label="最小值" align="right" width="130">
          <template slot-scope="scope">
            {{ scope.row.min + " " + scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button
              type="text"
              :style="'padding:none'"
              @click="handleDetail(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 图表详情页 -->
    <div v-if="page == 1">
      <chartsDetail
        :facId="facId"
        :paramId="paramId"
        :min="min"
        :max="max"
        :name="name"
        @changePage="changePage"
      ></chartsDetail>
    </div>

    <!-- </el-card> -->
  </div>
</template>

<script>
import { getLatestData } from "@/api/emergency/workData";
import chartsDetail from "./detail.vue";
export default {
  name: "perimeterData",
  props: ["facId"],
  components: { chartsDetail },
  data() {
    return {
      tableData1: [],
      // facId: "", // 路由传参获取的堆芯id 1-CEFR堆  2-CARR堆
      // 查询数据备份-每次从这里面查询数据
      tableDataTemp1: [], // 环境剂量率
      tableDataTemp2: [], // 能谱
      tableDataTemp3: [],
      // 查询数据
      searchData1: [],
      searchData2: [],
      searchData3: [],
      // 暂存前端查询前的数据-用于重置
      resetData1: [],
      resetData2: [],
      resetData3: [],
      // 是否已查询
      flag1: false,
      flag2: false,
      flag3: false,
      // 查询表单
      formInline1: { name: "" },
      formInline2: { name: "" },
      formInline3: { name: "" },
      activeName: "first", // tab切换
      facType: 0, //设备类型
      stationList: [], // 筛选使用到的全部站点,
      firstImgl: true,
      heightlight: 1,
      conheight: 0,
      page: 0, //页面切换0-当前页 1-图表详情页
      max: "",
      min: "",
      name: "",
    };
  },
  created() {
    this.getLatestData();
    //=====================
    // 页面高度显示自适应
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  methods: {
    // 获取工况最新数据
    getLatestData() {
      // const params = {
      //   facId: this.facId,
      //   ids: "",
      // };
      const str =
        this.facId == 1
          ? "/static/emergency/workData/workCEFRList.json"
          : "/static/emergency/workData/workCARRList.json";
      this.$axios.get(str).then((res) => {
        // getLatestData(params).then((res) => {
        // console.log(res.data.data.paramObjectList, "[[[[[[[[[");
        let paramObjectList = res.data.data.paramObjectList;
        console.log(paramObjectList);
        paramObjectList.sort(this.sortData);
        this.tableData1 = paramObjectList;
        // 查询临时数据
        this.tableDataTemp1 = paramObjectList;
        // 设置每条数据的状态 正常or异常
      });
    },
    sortData(a, b) {
      return a.sort - b.sort;
    },
    // 前端实现查询功能
    search1() {
      this.flag1 = true;
      const key = this.formInline1.name;
      const vm = this;
      this.searchData1 = [];
      console.log("查询前", this.tableDataTemp1);
      this.tableDataTemp1.forEach(function (item) {
        if (item.paramterName.indexOf(key) > -1) {
          vm.searchData1.push(item);
        }
      });
      // this.resetData1 = this.tableData1;
      this.tableData1 = this.searchData1;
      console.log("查询后", this.tableData1);
    },
    // 重置数据
    reset1() {
      this.getLatestData();
      this.formInline1 = {
        name: "",
      };
    },
    // 查看-引用组件
    handleDetail(row) {
      console.log(row, "row");
      (this.min = row.min), (this.max = row.max);
      this.name = row.paramterName;
      this.paramId = row.id;
      this.page = 1;
      // this.$router.push({
      //   path: "/facMonitor/workData/detail",
      //   query: {
      //     facId: this.facId,
      //     ids: row.id,
      //     // id: row.sysId,
      //     // // id: 1,
      //     // status: row.status,
      //     name: row.paramterName,
      //     // sys: row.sysName,
      //     max: row.max,
      //     min: row.min,
      //   },
      // });
    },
    changePage() {
      this.page = 0;
      console.log(this.showPage, "showpage");
    },
    /*处理小数和科学计数法的函数*/
    formatParamValue(item) {
      if (this.praseStrEmpty(item.paramNumber) != "") {
        if (Number(item.scmFlag) == 1) {
          let str = "";
          let num = Math.abs(item.paramNumber);
          let p = num == 0 ? 0 : Math.floor(Math.log(num) / Math.LN10);
          let m = 0;
          if (num.toString().indexOf(".") > -1) {
            m = num.toString().split(".")[1].length;
          }

          let n =
            Number(num.toString().replace(".", "")) * Math.pow(10, -p - m);
          str =
            (item.paramNumber >= 0 ? "" : "-") +
            parseFloat(n).toFixed(item.bit) +
            "E" +
            (p >= 0 ? "+" : "-");
          let pNew = (new Array(2).join(0) + Math.abs(p)).slice(-2);
          str += pNew;
          return str;
        }
        if (Number(item.bit) >= 0) {
          let num = parseFloat(item.paramNumber).toFixed(item.bit);
          return num;
        }
      }
      return item.paramNumber;
    },
    goback() {
      //子组件
      this.$emit("changePage");
    },
    getHeight() {
      console.log(window.innerHeight);
      this.conheight = window.innerHeight - 322;
      console.log(this.conheight, "0000000");
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  height: 40px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: bold;
  padding: 4px 10px 20px 10px;
  .title-name {
    width: 80px;
  }
  .title-refresh {
    width: 70px;
    color: #1890ff;
    text-align: right;
    padding-right: 15px;
  }
}
#cefr-box.app-container {
  padding: 0px;
  ::v-deep.el-card {
    border: 0px;
  }
  ::v-deep.el-card.is-always-shadow {
    box-shadow: 0 0px 0px 0 rgb(0 0 0 / 0%);
  }

  ::v-deep.el-card__body {
    padding: 0px;
  }
}
// tab
::v-deep .el-tabs__nav {
  width: 100%;
}
::v-deep .el-tabs__item {
  width: 33.3%;
  text-align: center;
  height: 40px;
  // padding-top: 2px;
  // padding-bottom: 4px;
}
// el-form
::v-deep .el-form {
  height: 55px;
  padding: 10px;
  .el-form-item__label {
    font-size: 14px;
    font-weight: bold;
    color: black;
  }
}
::v-deep .el-input__inner {
  width: 200px;
  height: 28px;
  font-size: 14px;
}
// .el-button {
//   height: 28px;
//   width: 64px;
//   font-size: 14px;
//   line-height: 5px;
// }
// table
::v-deep .el-table {
  // height: 460px;
  border: 0;
  padding-left: 10px;
  th,
  tr,
  td {
    border: 0;
  }
  &::before {
    height: 0px;
  }
  &::after {
    width: 0;
  }
  .el-table__fixed:before {
    height: 0;
  }
  // 去掉表格下划线
  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 40px;
    color: black;
    font-size: 14px;
  }
  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 40px;
  }
  // 去掉表头下划线
  thead tr th.is-leaf {
    border: 0px solid #ebeef5;
    border-right: none;
  }
}
// 检测状态
.zc {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: green;
  margin: auto 9px;
}
.yjbj {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: #e19b16;
  margin: auto 9px;
}
.ejbj {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: #e84b3f;
  margin: auto 9px;
}
.lx {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: gray;
  margin: auto 9px;
}
.flexDiv {
  display: flex;
  justify-content: space-between;
  .card-title {
    padding-left: 10px;
    margin: 6px 0px;
    font-size: 16px;
    font-weight: bold;
  }
}
.min {
  color: green;
}
.max {
  color: red;
}
</style>